.main {
    .box {
        width: 50%;
        display: flex;
        flex-flow: column wrap;
        height: 100vh;
    }

    .item {
        width: 100%;
        margin-bottom: 10px;
        margin: 10px;
        width: calc(100%/3 - 5px);
        /* 
        flex 实现瀑布流需要将最外层元素设置为 display: flex，使用弹性布局
        flex-flow:column wrap 使其纵向排列并且换行换行
        设置 height: 100vh 填充屏幕的高度，也可以设置为单位为 px 的高度，来容纳子元素。
        每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。
 */
        /* https://juejin.cn/post/7011333433318178846 原文 */
    }

    .item .img1 {
        width: 100%;
        height: 100px;
    }

    .item .img2 {
        width: 100%;
        height: 50px;
    }

    .item .img3 {
        width: 100%;
        height: 200px;
    }
}